<template>
	<view class="payment-password-layput">
		<view class="update-password-form">
			<!-- 手机号 -->
			<view class="update-password-form-item">
				<text class="update-password-form-title">手机号</text>
				<text class="update-password-form-item-tel">{{userStore.hidePhone}}</text>
				<view class="line"></view>
			</view>
			
			<xh-input :showTitle="true" title="验证码" minWidth="180rpx" placeholder="请输入验证码" keyboardType="number" v-model="formParams.code" :maxCount="6">
				<template #right>
					<text class="code-btn" :class="[isStartTime ? 'code-btn-select' : '']" @tap="startSendSms">{{isStartTime ? `${seconds}秒后重试` : '获取验证码'}}</text>
				</template>
			</xh-input>
			<xh-input :showTitle="true" title="新密码" minWidth="180rpx" placeholder="请输入6位数字密码" padding="30rpx" v-model="formParams.password" :isEye="true" :password="true" keyboardType="number" :maxCount="6"></xh-input>
			<xh-input :showTitle="true" title="确认新密码" minWidth="180rpx" placeholder="再次输入新密码" padding="30rpx" v-model="formParams.surePassword" :isEye="true" :password="true" keyboardType="number" :maxCount="6"></xh-input>
		</view>
		<view class="submit-btn" :style="{marginTop:'50rpx'}" @tap="submit">确认</view>
	</view>
</template>

<script setup>
	import { onUnload } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { totalSeconds, CUSTOMSERVICE_TEL } from '@/common/config/config.js'
	import { useUserStore } from '@/common/stores'
	import { setPayPassword } from '@/common/api/api.js'
	const userStore = useUserStore()
	//是否开始倒计时
	const isStartTime = ref(false)
	// 倒计时秒数
	const seconds = ref(totalSeconds)
	//计时器
	let timer = null
	const formParams = ref({
		oldPassword: '',
		password: '',
		surePassword: '',
		code:''
	})
	// 发送验证码
	const startSendSms = async ()=>{
		if (isStartTime.value) {
			return
		}
		let params = {}
		params.phoneNumber = userStore.user.tel
		params.smsType = 'zhifumima'
		await sendCaptcha(params)
		startTimer()
	}
	//开始倒计时
	const startTimer = () => {
		isStartTime.value = true
		//每秒执行一次
		timer = setInterval(() => {
			seconds.value -= 1
			if (seconds.value == 0) {
				seconds.value = totalSeconds
				isStartTime.value = false
				clearInterval(timer)
			}
		}, 1000)
	}
	// 确认
	const submit = async () => {
		if(uni.$uv.test.empty(formParams.value.code)) {
			uni.$utils.showToast('请输入验证码 ')
			return
		}
		else if(uni.$uv.test.empty(formParams.value.password)) {
			uni.$utils.showToast('请输入6位数字支付密码')
			return
		}
		else if(!uni.$utils.checkPayPassword(formParams.value.password)) {
			uni.$utils.showToast('密码必须是6位数字')
			return
		}
		else if(uni.$uv.test.empty(formParams.value.surePassword)) {
			uni.$utils.showToast('请再次输入新密码')
			return
		}
		else if(formParams.value.password != formParams.value.surePassword) {
			uni.$utils.showToast('两次输入的密码不一致')
			return
		}
		let params = {}
		const pwdRes = uni.$utils.passwordEncrypt(formParams.value.password)
		params.password = oldPwdRes
		params.confirmPassword = pwdRes
		params.smsChkCode = formParams.value.code
		await setPayPassword(params)
		uni.$utils.showToast('支付密码设置成功')
		userStore.user.withdrawPwdStatus = '1'
		uni.navigateBack()
	}
	onUnload(() => {
		if (timer) {
			clearInterval(timer)
		}
	})
</script>

<style lang="scss" scoped>
	.payment-password-layput {
		padding-top: 1px;
		.update-password-form {
			background-color: #ffffff;
			.update-password-form-item{
				display: flex;
				align-items: center;
				height: 100rpx;
				position: relative;
				padding: 0 30rpx;
				.update-password-form-title{
					min-width: 220rpx;
				}
				.update-password-form-item-line{
					transform: scaleY(1.0);
				}
				.update-password-form-item-tel{
					color: $xh-color-9;
					
				}
			}
			.code-btn {
				color: $xh-theme-color;
				margin-left: 10rpx;
				font-size: 28rpx;
			}
			.code-btn-select {
				color: #cccccc;
			}
		}
	}
</style>